<template>
	<view class="index">
		<template v-if="JSON.stringify(tab) != '{}'">
			<view class="tab-menu">
				<template v-for="item in tab.list">
					<view
						v-if="item.switch"
						:class="tabPage == item.id ? 'for hover' : 'for'"
						@click="clickTab(item.id,item.name)">
						<text class="text">{{item.name}}</text>
						<view></view>
					</view>
				</template>
			</view>
			<view style="width: 100%;height: 90rpx;"></view>
		</template>
		<youran-diy
			:Config="configJson"
			v-if="componentStatus"
			ref="childRef"></youran-diy>
		<!-- #ifdef APP-PLUS -->
		<view
			v-if="forTheFirstTimeAgreementBox"
			class="for-the-first-time-agreement">
			<view class="box">
				<view class="box-info">
					<mp-html
						:content="forTheFirstTimeAgreementHtml"/>
				</view>
				<view class="button">
					<view
						@click="clickAgreement(true)"
						style="background: #409EFF;">同意</view>
					<view
						@click="clickAgreement(false)"
						style="background: #F56C6C;">不同意</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- 微信隐私弹窗 -->
		<!-- #ifdef MP-WEIXIN -->
		<public-privacy-popup></public-privacy-popup>
		<!-- #endif -->
		
		<template v-if="headlinesState">
			<view
				class="headlines"
				v-if="JSON.stringify(headlines) != '{}'">
				<view
					@click="clickCloseHeadlines(headlines.key)"
					class="close-button">
					<text class="iconfont icon-close-bold"></text>
				</view>
				<view
					@click="clickHeadlines(headlines.key,headlines.url)"
					class="headlines-content">
					<view class="_title">{{headlines.title}}</view>
					<view class="_image" v-if="headlines.coverImage">
						<image :src="headlines.coverImage" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:{},
				tabPage:1,
				configJson:"index.json",
				componentStatus:true,
				forTheFirstTimeAgreementHtml:"",
				forTheFirstTimeAgreementBox:false,
				headlines:{},
				headlinesState:true
			}
		},
		onUnload(){
			
		},
		onShow() {
			// 是否有通知
			this.$_isThereAnotification();
		},
		onLoad() {
			// 微信 | 小程序 | 更新检测
			// #ifdef MP-WEIXIN
			const updateManager = uni.getUpdateManager()
			updateManager.onCheckForUpdate(res => {
				if (res.hasUpdate) {
					uni.showModal({
						content: '新版本已经准备好，是否重启应用？',
						showCancel: false,
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								updateManager.onUpdateReady(res => {
									updateManager.applyUpdate()
								})
								updateManager.onUpdateFailed(res => {
									uni.showModal({
										content: '下载失败，请删除当前小程序后重新打开',
										showCancel: false,
										confirmText: '知道了'
									})
								})
							}
						}
					})
				}
			})
			// #endif

			// #ifdef APP-PLUS
			// App更新
			//this.getAppVersion();
			// #endif
			this.$_Request(
				"GET", "/api/v2/global/configs",{"keys":"site_name"},
				(res) => {
					this.webName = res.data.data.site_name;
					uni.setNavigationBarTitle({ title: this.webName })
					// 获取首页配置文件，主要读取首页的选项卡配置
					this.getIndexConfig();
				}
			)
		},
		methods: {
			// 触底事件
			onReachBottom(){
				if(this.$store.state.onReachBottomStatus){
					this.$store.commit('mutationsStateonReachBottomStatus',false)
					this.$refs.childRef.onReachBottomMethods();
				}
			},
			// 获取首页配置文件，主要读取首页的选项卡配置
			getIndexConfig(){
				uni.request({
					url:this.$_Config() + "index.json",
					success: (res) => {
						if(res.data.headlines){
							if(JSON.stringify(res.data.headlines) != '{}'){
								this.headlinesMethods(res.data.headlines);
							}
						}
						
						// #ifndef H5
						this.getAllConfig();
						// #endif
						if(res.data.tab.switch){
							this.tab = res.data.tab;
						}
					}
				})
			},
			// 首页头条推荐方法
			headlinesMethods(e){
				let value = uni.getStorageSync('headlines');
				if(value){
					if(value == e.key){
						this.headlinesState = false;
					}else{
						this.headlinesState = true;
						this.headlines = e;
					}
				}else{
					this.headlinesState = true;
					this.headlines = e;
				}
			},
			// 点击首页头条
			clickHeadlines(key,url){
				uni.setStorageSync('headlines', key);
				this.headlinesState = false;
				this.$_To(url)
			},
			// 关闭头条
			clickCloseHeadlines(key){
				uni.setStorageSync('headlines', key);
				this.headlinesState = false;
			},
			// 获取全局配置
			getAllConfig(){
				uni.request({
					url:this.$_Config() + "Config.json",
					success: (res) => {
						if(res.data.forTheFirstTimeAgreement.switch){
							// 如果开启了用户协议，先读取本地缓存
							this.getStorageSyncCacheAgreement(res.data.forTheFirstTimeAgreement.html);
						}
					}
				})
			},
			// 获取本地储存，用户是否点了同意
			getStorageSyncCacheAgreement(info){
				if (uni.getStorageSync('cacheAgreement')) {
					this.forTheFirstTimeAgreementBox = false;
				}else{
					this.forTheFirstTimeAgreementBox = true;
					this.forTheFirstTimeAgreementHtml = info;
				}
			},
			// 升级检测
			getAppVersion(){
				// #ifdef APP-ANDROID
				uni.request({
					url: this.$_Url() + "/status.json",
					method: 'GET',
					success: (res) => {
						let currentVersion = plus.runtime.version,
							latestVersion = res.data.client.mobile.android.version;
						if (currentVersion != latestVersion) {
							uni.showModal({
								title: "注意",
								content: "有新版本，是否更新？",
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pages/my/appVersion"
										})
									}
								}
							});
						}
					}
				})
				// #endif
			},
			// 点击切换卡
			clickTab(id,name){
				// 获取首页配置文件，主要读取首页的选项卡配置
				this.getIndexConfig();
				this.componentStatus = false;
				this.tabPage = id;
				if(id == 1){
					this.configJson = 'index.json';
					uni.setNavigationBarTitle({ title: this.webName })
				}
				if(id == 2){
					this.configJson = 'index_2.json';
					uni.setNavigationBarTitle({ title: name })
				}
				if(id == 3){
					this.configJson = 'index_3.json';
					uni.setNavigationBarTitle({ title: name })
				}
				if(id == 4){
					this.configJson = 'index_4.json';
					uni.setNavigationBarTitle({ title: name })
				}
				if(id == 5){
					this.configJson = 'index_5.json';
					uni.setNavigationBarTitle({ title: name })
				}
				setTimeout(() => {
					this.componentStatus = true;
				}, 100);
			},
			// 点击协议操作按钮
			clickAgreement(type){
				// 同意
				if(type){
					uni.setStorageSync('cacheAgreement', true);
					this.forTheFirstTimeAgreementBox = false;
				}
				// 不同意
				if(!type){
					if (uni.getSystemInfoSync().platform == 'ios'){
						plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
					} else if (uni.getSystemInfoSync().platform == 'android'){
						plus.runtime.quit();
					}
				}
			}
		},
		// 触底事件
		
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: this.webName,
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.webName,
				path: '/pages/index/index'
			}
		},
		// 下拉，加载
		onPullDownRefresh() {
			if(this.tabPage == 1){
				this.componentStatus = false;
				this.configJson = 'index.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 2){
				this.componentStatus = false;
				this.configJson = 'index_2.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 3){
				this.componentStatus = false;
				this.configJson = 'index_3.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 4){
				this.componentStatus = false;
				this.configJson = 'index_4.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 5){
				this.componentStatus = false;
				this.configJson = 'index_5.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
		},
	}
</script>

<style lang="scss">
.index{
	.tab-menu{
		width: 750rpx;
		height: 90rpx;
		background: $BeiJingSe;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top:var(-window-top);
		left: 0;
		z-index: 999;
		.for{
			width: 150rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			position: relative;
			.text{
				font-size: 32rpx;
				line-height: 32rpx;
				color: $ZhanWeiSe;
			}
		}
		.hover{
			.text{
				color: $YuanSe;
			}
			view{
				width: 40rpx;
				height: 10rpx;
				background: $HuangSe;
				border-radius: 100rpx;
				position: absolute;
				left: 55rpx;
				bottom: 15rpx;
			}
		}
	}
	.for-the-first-time-agreement{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		background-color:rgba(0,0,0,0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		.box{
			width: 80%;
			background: #FFF;
			border-radius: 15rpx;
			padding: 25rpx;
			.button{
				display: flex;
				align-items: center;
				justify-content: center;
				view{
					margin: 0 12.5rpx;
					color: #FFF;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 15rpx 20rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.headlines{
		position: fixed;
		left: 0;
		bottom:var(--window-bottom);
		z-index: 999999;
		box-shadow: 0 0 1rpx #999;
		background: #FFF;
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		.close-button{
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			z-index: 1;
			width: 40rpx;
			height: 40rpx;
			background: red;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100rpx;
			line-height: 28rpx;
			text{
				color: #FFF;
				font-size: 28rpx;
			}
		}
		.headlines-content{
			display: flex;
			align-items: center;
			padding: 15rpx;
			._title{
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 2;
				overflow: hidden;
				flex: 1;
			}
			._image{
				width: 150rpx;
				height: 100rpx;
				overflow: hidden;
				flex-shrink: 0;
				border-radius: 10rpx;
			}
		}
	}
}
</style>